<template>
	<view>
		<view v-if="usage.length == 0">
			<History :info='info'></History>
		</view>
		<view class="usage" v-for="(item,index) in usage" :key='index' v-else>
			<view class="info">
				<view class="car ">
					{{item.car_num}}
				</view>
				<view class="position layout">
					{{item.park_num}}
				</view>
				<view class="startTime">
					入场时间:
					<text>{{item.start_time}}</text>
				</view>
				<view class="stay layout">
					停留时间:<text>{{item.timetotal}}</text>
				</view>
				<view class="money layout">
					停车金额:
					<text>￥{{item.money}}</text>
				</view>
			</view>
			<view class="status">
				<!-- <view class="status__finish" v-if=" item.payment_time ">已完成</view> -->
				<view class="status__unfinished" v-if="item.payment_time ">已完成</view>
				<view class="status__finish" v-else>未出场</view>
				<!-- <view v-if="item.payment_time">
					<u-button class="button" @click="showPop(true,item.money)">支付</u-button>
				</view> -->
				<!-- <view v-else-if="item.status== 2">
					<u-button class="button">结束停车</u-button>
				</view> -->
				<view v-else>
				</view>
			</view>
		</view>
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
			v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 cash">
					<text>{{money}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>

</template>

<script>
	import History from '../../components/History.vue'
	// import {
	// 	timeFn
	// } from '../../until/time.js'
	export default {
		data() {
			return {
				usage: [],
				show: false,
				password: '',
				money: 1.00,
				info: {
					src: '../../static/image/mine/weiyuejilu.png',
					text: '暂无使用记录'
				}
			}
		},
		methods: {

			getHistory() {
				this.$u.api.getUsageHistory().then(res => {
					console.log(res)
					let d = new Date()
					let hour
					let date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d
						.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
					this.usage = res.data
					for (let i = 0; i < this.usage.length; i++) {
						if (!this.usage[i].end_time) {
							this.usage[i].end_time = date
						}
						let times = this.timeFn(this.usage[i].start_time, this.usage[i].end_time)
						this.usage[i].timetotal = times.time
						if (!this.usage[i].money) {
							this.usage[i].money = (times.hour * 5).toFixed(2)
						}
					}
					// console.log(this.usage)
				})
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				uni.showLoading({
					title: '支付中'
				})

				setTimeout(() => {
					uni.hideLoading();
					this.show = false;
					uni.showToast({
						icon: 'success',
						title: '支付成功'
					})
				}, 2000);
			},
			showPop(flag = true, money) {
				this.password = ''
				this.show = flag
				this.money = money
			},
			finish() {
				console.log(11111)
			},
			timeFn(d1, d2) { //di作为一个变量传进来
				//如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
				let dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
				let dateEnd = new Date(d2.replace(/-/g, "/")); //将-转化为/，使用new Date
				// let dateEnd = new Date(); //获取当前时间
				let dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
				let dayDiff = parseInt(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
				let leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				let hours = parseInt(leave1 / (3600 * 1000)) //计算出小时数
				//计算相差分钟数
				let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				let minutes = parseInt(leave2 / (60 * 1000)) //计算相差分钟数
				//计算相差秒数
				let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				let seconds = Math.round(leave3 / 1000)
				// console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
				let h = dayDiff * 24 + hours
				let hour = dayDiff * 24 + hours + minutes / 60
				// console.log(h.toFixed(2))
				let times = {
					time: `${h}小时${minutes}分`,
					hour: hour
				}
				return (times)
			}
		},
		components: {
			History
		},
		onShow() {
			this.getHistory()
		},
		onPullDownRefresh() {
			this.getHistory()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color;
	}

	.usage {
		display: flex;
		justify-content: cneter;
		// align-items: center;
		background-color: #FFFFFF;
		height: 300rpx;
		background-color: #FFFFFF;
		margin: 20rpx 5% 0 5%;
		border-radius: 40rpx;

		.info {
			display: flex;
			flex-flow: column;
			justify-content: center;
			padding-left: 20rpx;
			font-size: 32rpx;

			.layout {
				margin-top: 5rpx;
			}

			.car {
				font-size: 40rpx;
				font-weight: bold;
			}

			.position {
				font-size: 26rpx;
			}

			.startTime {
				margin-top: 30rpx;
			}

			text {
				padding-left: 20rpx;
			}

			.money {
				text {
					color: $base-color;
				}
			}

		}

		.status {
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			margin: 30rpx 30rpx 0 auto;

			&__finish {
				color: #999999;
				font-size: 36rpx;
				margin-right: 40rpx;
			}

			&__unfinished {
				color: #F0AD4E;
				font-size: 36rpx;
			}

			.button {
				width: 150rpx;
				color: #FFFFFF;
				background-color: $base-color;
				margin-bottom: 20rpx;
			}
		}
	}

	.cash {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}
</style>
